<template>
    <div>
        <h2 style="text-align: center">显示投资项目</h2>

        项目名称: <input type="text" placeholder="请输入项目名称" v-model="whereinfo.Iname">
        项目总金额: <input type="text" placeholder="请输入最小投资金额" v-model="whereinfo.IMinIbudget">-<input type="text" placeholder="请输入最大投资金额" v-model="whereinfo.IMaxIbudget">
        <input type="button" value="查询" class="btn btn-success" @click="LoadShow">
        <table class="table table-bordered">
            <thead>
                <tr style="background-color: aqua;">
                    <td>投资项目编号</td>
                    <td>投资项目名称</td>
                    <td>投资总金额</td>
                    <td>已投资额度</td>
                    <td>剩余额度</td>
                    <td>投资人数</td>
                    <td>操作</td>
                </tr>
            </thead>

            <tbody>
                <tr v-for="item in info">
                    <td>{{ item.I_Id }}</td>
                    <td>{{ item.I_Name }}</td>
                    <td>{{ item.I_Budget }}</td>
                    <td>{{ item.I_Receive }}</td>
                    <td>{{ item.I_Residue }}</td>
                    <td>{{ item.I_Number }}</td>
                    <td>操作</td>
                </tr>
            </tbody>
        </table>

        <span>
            总共{{ Pageinfo.totalCount }}条数据,每页显示{{ Pageinfo.PSize }}条,当前{{ Pageinfo.PIndex }}/{{ Pageinfo.pageCount }}页
            <a href="#" @click="PageSet('F')">首页</a>&nbsp;
            <a href="#" @click="PageSet('U')">上一页</a>&nbsp;
            <a href="#" @click="PageSet('N')">下一页</a>&nbsp;
            <a href="#" @click="PageSet('E')">尾页</a>&nbsp;

            <select v-model="SelSize" @change="SelectSize">
                <option value="1">1条/页</option>
                <option value="2">2条/页</option>
                <option value="3">3条/页</option>
                <option value="4">4条/页</option>
            </select>

            <input type="text" style="width: 30px" v-model="TiaoIndex">
            <input type="button" value="GO" @click="LoadIndex">
        </span>
    </div>
</template>

<script setup lang="ts">
import {onMounted,ref} from 'vue';
import axios from 'axios';

//创建响应式数据
const info=ref([{
    I_Id:"",
    I_Name:"",
    I_Budget:0,
    I_Receive:0,
    I_Residue:0,
    I_Number:0
}])

//创建响应式数据(用于查询)
const whereinfo=ref({
    Iname:"",
    IMinIbudget:"",
    IMaxIbudget:""
})

//创建响应式数据(用于分页)
const Pageinfo=ref({
    PIndex:1, //当前页
    PSize:2,//每页显示多少条
    totalCount:0,//总条数
    pageCount:0//总页数
})

//创建数据
const SelSize=ref(2)
const TiaoIndex=ref("")

//函数钩
onMounted(() => {
    LoadShow()
})

//获取查询到的数据
const LoadShow=()=>{
    axios.get("https://localhost:44334/api/Invests/ShowInvestInfo",
        {
            params:{
                Iname:whereinfo.value.Iname,
                MinIbudget:whereinfo.value.IMinIbudget,
                MaxIbudget:whereinfo.value.IMaxIbudget,
                PageIndex:Pageinfo.value.PIndex,
                PageSize:Pageinfo.value.PSize
            }
        }
    )
    .then(res=>{
        info.value=res.data.list

        //获取数据赋值
        Pageinfo.value.totalCount=res.data.totalCount
        Pageinfo.value.pageCount=res.data.PageCount
    })
}

//完成分页
const PageSet=(val:string)=>{
    switch(val)
    {
        case 'F':
            Pageinfo.value.PIndex=1;
        break;

        case 'U':
            if(Pageinfo.value.PIndex>1)
            {
                Pageinfo.value.PIndex--;
            }
            else
            {
                alert('当前已经是首页');
                return
            }
            
        break;

        case 'N':
        if(Pageinfo.value.PIndex<Pageinfo.value.pageCount)
            {
                Pageinfo.value.PIndex++;
            }
            else
            {
                alert('当前已经是最后一页');
                return
            }
        break;

        case 'E':
            Pageinfo.value.PIndex=Pageinfo.value.pageCount;
        break;
    }
    LoadShow()
}

//下拉框
const SelectSize=()=>{
    Pageinfo.value.PSize=SelSize.value;
    Pageinfo.value.PIndex=1;
    LoadShow()
}

//文本框跳转页面
const LoadIndex=()=>{
    const newIndex=TiaoIndex.value;

    //不能为空
    if(newIndex=="")
    {
        alert('页面值不能为空');
        return;
    }

    //必须为数字
    if(isNaN(Number(newIndex)))
    {
        alert('输入的值必须为数字');
        TiaoIndex.value=""
        return;
    }

    //输入的页码不能低于1
    if(Number(newIndex)<1)
    {
        alert('输入的值不能小于1');
        TiaoIndex.value=""
        return;
    }

    //输入的页码不能大于总页数
    if(Number(newIndex)>Pageinfo.value.pageCount)
    {
        alert('输入的值不能大于总页数');
        TiaoIndex.value=""
        return;
    }
    Pageinfo.value.PIndex=Number(newIndex);
    LoadShow();

}

</script>